/* tag 签状态类名集合,非tag状态变更禁止修改 */
$white: white;
$red: #E74C3D;
$red_light: #FFF1EF;
$green: #28AE60;
$green_light: #EEFBF2;
$grass_green: #63C820;
$grass_green_light: #EEFFE2;
$purple: #7B61E5;
$purple_light: #F1ECFF;
$orange: #FFAA32;
$orange_light: #FFF6E4;
$sky_blue: #3A9AFF;
$sky_blue_light: #DFF7FF;
$sapphire_blue: #1762C9;
$sapphire_blue_light: #E8F2FF;
$pink: #F45AAD;
$pink_light: #FFEBF8;
$gray: #A0A3A9;
$gray_light: #F3F4F7;


@mixin colorStyle($color, $bgColor) {
    color: $color !important;
    background-color: $bgColor !important;
    border-color: $color !important;

    .el-tag__close {
        color: $color !important;

        &:hover {
            color: $white !important;
            background-color: $color !important;
        }
    }
}


//light

.merak_sys_tag.merak_tag_red {
    @include colorStyle($red, $red_light)
}

.merak_sys_tag.merak_tag_green {
    @include colorStyle($green, $green_light)
}

.merak_sys_tag.merak_tag_grass_green {
    @include colorStyle($grass_green, $grass_green_light)
}

.merak_sys_tag.merak_tag_purple {
    @include colorStyle($purple, $purple_light)
}

.merak_sys_tag.merak_tag_orange {
    @include colorStyle($orange, $orange_light)
}

.merak_sys_tag.merak_tag_sky_blue {
    @include colorStyle($sky_blue, $sky_blue_light)
}

.merak_sys_tag.merak_tag_sapphire_blue {
    @include colorStyle($sapphire_blue, $sapphire_blue_light)
}

.merak_sys_tag.merak_tag_pink {
    @include colorStyle($pink, $pink_light)
}

.merak_sys_tag.merak_tag_gray {
    @include colorStyle($gray, $gray_light)
}

/* 暗黑模式 */
.drak {
    .merak_sys_tag.merak_tag_red {
        @include colorStyle($white, $red)
    }

    .merak_sys_tag.merak_tag_green {
        @include colorStyle($white, $green)
    }

    .merak_sys_tag.merak_tag_grass_green {
        @include colorStyle($white, $grass_green)
    }

    .merak_sys_tag.merak_tag_purple {
        @include colorStyle($white, $purple)
    }

    .merak_sys_tag.merak_tag_orange {
        @include colorStyle($white, $orange)
    }

    .merak_sys_tag.merak_tag_sky_blue {
        @include colorStyle($white, $sky_blue)
    }

    .merak_sys_tag.merak_tag_sapphire_blue {
        @include colorStyle($white, $sapphire_blue)
    }

    .merak_sys_tag.merak_tag_pink {
        @include colorStyle($white, $pink)
    }

    .merak_sys_tag.merak_tag_gray {
        @include colorStyle($white, $gray)
    }

}